import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from '../store'
import HoverImage from '../components/HoverImg'
import btn_big_n from '@/resource/auctionManage/btn_big_n.png'
import btn_big_s from '@/resource/auctionManage/btn_big_s.png'
import first_icon from '@/resource/auctionManage/first_icon.png'
import default_avatar from '@/resource/default_avatar.png'
import { history, useLocation, useParams } from 'umi'
import Bar from '../components/Bar'
import { useEffect, useRef, useState } from 'react'
import { getLocalStorage } from '@/storage'
import IconFont from '@/components/IconFont'
import useFullScreen from '@/hooks/useFullScreen'
import btn_small_n from '@/resource/auctionManage/btn_small_n.png'
import btn_small_s from '@/resource/auctionManage/btn_small_s.png'
import { useResize } from '@/hooks/useResize'

export default observer(() => {
    const store = useLocalObservable(() => Store)
    const { statisticInfo, getTrainingStatisticInfo } = store
    const { form_statistic_arr, statistic_arr } = statisticInfo
    const audioRef = useRef<any>(null)
    const [isPlay, setIsPlay] = useState<boolean>(false)
    const [tab, settab] = useState(2)
    const { isFullScreen, toggleFullScreen } = useFullScreen()
    const { id } = useLocation().query
    useResize({ id: 'result_resize_container' })

    useEffect(() => {
        document.title = '拍卖游戏'
        getTrainingStatisticInfo(id)
        if (audioRef.current) {
            audioRef.current.muted = false
            setIsPlay(audioRef.current.muted ? false : true)
        }
    }, [])

    /** 音乐静音切换 */
    const playOrPause = () => {
        // 如果是暂停状态并且未播放完成
        if (audioRef.current.paused && !audioRef.current.ended) {
            audioRef.current.play().then(() => {
                audioRef.current.muted = false
                setIsPlay(true)
            })
            return
        }
        if (audioRef.current.muted) {
            audioRef.current.muted = false
            setIsPlay(true)
        } else {
            audioRef.current.muted = true
            setIsPlay(false)
        }
    }

    return (
        <div className={styles.container}>
            <HoverImage onClick={toggleFullScreen} className={styles.full_btn} src={btn_small_s} placeholderSrc={btn_small_n}>
                {isFullScreen ? (
                    <>
                        <IconFont type="icon-icon_tuichuquanping" />
                        退出全屏
                    </>
                ) : (
                    <>
                        <IconFont type="icon-icon_jinruquanping" />
                        进入全屏
                    </>
                )}
            </HoverImage>
            <div id="result_resize_container">
                <div className={styles.wrapper}>
                    <div className={tab === 2 ? styles.title : styles.title_hidden} onClick={() => settab(2)}>
                        拍卖统计
                    </div>
                    <div className={tab === 1 ? styles.title2 : styles.title2_hidden} onClick={() => settab(1)}>
                        拍卖表统计
                    </div>
                    <div className={styles.frame}>
                        <div className={styles.scroll_wrapper}>
                            {tab === 1 &&
                                form_statistic_arr.map((item: any, index: number) => {
                                    return (
                                        <div key={item?.id}>
                                            <div className={styles.bar_title}>
                                                {index + 1}、{item.describe}
                                            </div>
                                            <Bar data={item.statistic.map((i: any) => Number(i.count))} id={item?.id} />
                                        </div>
                                    )
                                })}
                            {tab === 2 &&
                                statistic_arr.map((item: any, index: number) => {
                                    let { student_rank } = item
                                    student_rank = student_rank?.slice()?.sort((a: any, b: any) => a.rank - b.rank)
                                    return (
                                        <div key={item?.id}>
                                            <div className={styles.bar_title}>
                                                {index + 1}、{item.describe}
                                            </div>
                                            <div className={styles.bar_wrapper}>
                                                <div className={styles.reward_stage}>
                                                    <div className={styles.sliver}>
                                                        <div className={styles.name}>{student_rank?.[1]?.user_name || '--'}</div>
                                                        <img src={student_rank?.[1]?.avatar || default_avatar} />
                                                        <div className={styles.price}>{student_rank?.[1]?.price || 0} 万</div>
                                                    </div>
                                                    <div className={styles.gold}>
                                                        <div className={styles.name}>{student_rank?.[0]?.user_name || '--'}</div>
                                                        <img src={student_rank?.[0]?.avatar || default_avatar} />
                                                        <div className={styles.price}>
                                                            <img src={first_icon} />
                                                            {student_rank?.[0]?.price || 0} 万
                                                        </div>
                                                    </div>
                                                    <div className={styles.cropper}>
                                                        <div className={styles.name}>{student_rank?.[2]?.user_name || '--'}</div>
                                                        <img src={student_rank?.[2]?.avatar || default_avatar} />
                                                        <div className={styles.price}>{student_rank?.[2]?.price || 0} 万</div>
                                                    </div>
                                                </div>

                                                <div className={styles.right_info}>
                                                    <div className={styles.info_block}>
                                                        <div>代表价值</div>
                                                        <div>{item?.represent}</div>
                                                    </div>
                                                    <div className={styles.info_bottom}>
                                                        <div className={styles.info_block}>
                                                            <div>参与竞拍人数</div>
                                                            <div>{item?.join_num} 人</div>
                                                        </div>
                                                        <div className={styles.info_block}>
                                                            <div>平均竞拍金额</div>
                                                            <div>{item?.join_price_avg} 万</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    )
                                })}
                        </div>
                    </div>
                </div>
                <HoverImage
                    className={styles.statr_btn}
                    placeholderSrc={btn_big_n}
                    src={btn_big_s}
                    wait={500}
                    onClick={() => {
                        const cb = getLocalStorage('CALLBACK_URL')
                        if (cb) {
                            window.location.href = cb
                            return
                        }
                        history.goBack()
                    }}
                >
                    返回实训列表
                </HoverImage>
            </div>
            <div className={styles.music_box} onClick={playOrPause}>
                {isPlay ? <img className={styles.open} src="https://cp-oss.busionline.com/qzsx/music_open.png" /> : <img src="https://cp-oss.busionline.com/qzsx/music_close.png" />}
                <audio ref={audioRef} autoPlay muted src="https://cp-oss.busionline.com/qzsx/audio/价值观拍卖会音效6-结束.mp3" />
            </div>
        </div>
    )
})
